<template>
  <div class="membersetup-contianter fillcontain">
    <breadcrumb></breadcrumb>
    <div class="content">
      <div class="container">
        <el-main>
          <el-card class="box-card">
            
            <!-- <div slot="header" class="clearfix">
              <span>买好礼送会员</span>
            </div> -->
            <!-- <el-form label-width="100px">
              <el-form-item label="消费" label-width="40px">
                <el-input v-model="monthBalance" style="width:150px"></el-input>
                <span>元&nbsp;</span>&nbsp;送月卡
              </el-form-item>
              <el-form-item label="消费" label-width="40px">
                <el-input v-model="seasonBalance" style="width:150px"></el-input>
                <span>元&nbsp;</span>&nbsp;送季卡
              </el-form-item>
              <el-form-item label="消费" label-width="40px">
                <el-input v-model="yearBalance" style="width:150px"></el-input>
                <span>元&nbsp;</span>&nbsp;送年卡
              </el-form-item>
            </el-form> -->
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>会员返现</span>
            </div>
            <el-form label-width="40px">
              <el-form-item label="月卡">
                邀请好友返利&nbsp;&nbsp;
                <el-input v-model="monthInviteFriend" style="width:150px"></el-input>
                <span>元</span>
              </el-form-item>
            </el-form>
            <el-form label-width="130px" style="margin-left: 60px;">
              <el-form-item label="好友邀请好友返利">
                <el-input v-model="monthFriendInviteFriend" style="width:150px"></el-input>
                <span>元</span>
              </el-form-item>
            </el-form>
          </el-card>
          <el-card class="box-card">
            <el-form label-width="40px">
              <el-form-item label="季卡">
                邀请好友返利&nbsp;&nbsp;
                <el-input v-model="seasonInviteFriend" style="width:150px"></el-input>
                <span>元</span>
              </el-form-item>
            </el-form>
            <el-form label-width="130px" style="margin-left: 60px;">
              <el-form-item label="好友邀请好友返利">
                <el-input v-model="seasonFriendInviteFriend" style="width:150px"></el-input>
                <span>元</span>
              </el-form-item>
            </el-form>
          </el-card>
          <el-card class="box-card">
            <el-form label-width="40px">
              <el-form-item label="年卡">
                邀请好友返利&nbsp;&nbsp;
                <el-input v-model="yearInviteFriend" style="width:150px"></el-input>
                <span>元</span>
              </el-form-item>
            </el-form>
            <el-form label-width="130px" style="margin-left: 60px;">
              <el-form-item label="好友邀请好友返利">
                <el-input v-model="yearFriendInviteFriend" style="width:150px"></el-input>
                <span>元</span>
              </el-form-item>
            </el-form>
          </el-card>
        </el-main>
        <el-footer>
          <el-button type="primary" @click="modifyMember">确定</el-button>
          <el-button style="color:#409EFF " @click="cancle">取消</el-button>
          <!-- <span>{{this.$route.query.memberSetUp}}</span> -->
        </el-footer>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from "../../components/breadcrumb";
export default {
  components: { breadcrumb },
  data() {
    return {
      monthBalance: "",
      seasonBalance: "",
      yearBalance: "",
      monthInviteFriend: "",
      monthFriendInviteFriend: "",
      seasonInviteFriend: "",
      seasonFriendInviteFriend: "",
      yearInviteFriend: "",
      yearFriendInviteFriend: ""
    };
  },
  created() {
    this.get_memberMsg();
  },
  methods: {
    get_memberMsg() {
      this.$axios.post("/member/card/list").then(result => {
        if (result.data.status == 0) {
          let data = result.data.data;
          if (data) {
            this.monthBalance = data[0].balance;
            this.seasonBalance = data[1].balance;
            this.yearBalance = data[2].balance;
            this.monthInviteFriend = data[0].inviteFriend;
            this.seasonInviteFriend = data[1].inviteFriend;
            this.yearInviteFriend = data[2].inviteFriend;
            this.monthFriendInviteFriend = data[0].friendInviteFriend;
            this.seasonFriendInviteFriend = data[1].friendInviteFriend;
            this.yearFriendInviteFriend = data[2].friendInviteFriend;
          }
        }
      });
    },
    modifyMember() {
      // if (!this.monthBalance || !this.seasonBalance || !this.yearBalance) {
      //   return this.$message({
      //     type: "warning",
      //     message: "会员消费不能为空"
      //   });
      // }
      let data = [
        {
          id: "1",
          name: "月卡",
          balance: "",
          inviteFriend: "",
          friendInviteFriend: ""
        },
        {
          id: "2",
          name: "季卡",
          balance: "",
          inviteFriend: "",
          friendInviteFriend: ""
        },
        {
          id: "3",
          name: "年卡",
          balance: "",
          inviteFriend: "",
          friendInviteFriend: ""
        }
      ];
      data[0].balance = this.monthBalance;
      data[1].balance = this.seasonBalance;
      data[2].balance = this.yearBalance;
      data[0].inviteFriend = this.monthInviteFriend;
      data[1].inviteFriend = this.seasonInviteFriend;
      data[2].inviteFriend = this.yearInviteFriend;
      data[0].friendInviteFriend = this.monthFriendInviteFriend;
      data[1].friendInviteFriend = this.seasonFriendInviteFriend;
      data[2].friendInviteFriend = this.yearFriendInviteFriend;
      this.$axios.post("/member/card/modify", data).then(result => {
        if (result.data.status == 0) {
          if (result.data.data == 0) {
            this.get_memberMsg();
            return this.$message({
              type: "warning",
              message: "修改失败"
            });
          } else {
            return this.$message({
              type: "success",
              message: "修改成功"
            });
          }
        }
      });
    },
    cancle() {
      this.get_memberMsg();
    }
  }
};
</script>

<style lang="less">
.membersetup-contianter {
  position: relative;
  .el-form-item__label {
    text-align: left;
  }
  .el-input__inner {
    line-height: 30px;
    height: 30px;
    width: 150px;
  }
  .breadcrumb-container {
    position: absolute;
    width: 100%;
  }
  .content {
    .el-card.is-always-shadow {
      box-shadow: none;
    }
    background-color: #eff3f6;
    padding: 60px 20px 20px;
    height: 100%;
    box-sizing: border-box;
    .container {
      background-color: #fff;
      height: 100%;
      .el-main {
        background-color: #fff;
        .box-card {
          border: none;
          .el-card__header {
            line-height: 60px;
            padding: 0;
            border-bottom: none;
            color: #5e70e6;
            font-size: 16px;
          }
          .el-card__body {
            display: flex;
            padding: 0;
            .el-form {
              padding-left: 20px;

              .el-form-item {
                .el-form-item__content {
                  display: flex;
                  .el-input {
                    width: 160px;
                  }
                }
              }
            }
          }
        }
      }
      .el-footer {
        text-align: center;
        button {
          margin: 0 40px;
          height: 30px;
          width: 70px;
          padding: 0;
        }
      }
    }
  }
}
</style>

